<!--  -->
<template>
  <div class="">
    <van-nav-bar left-arrow="true" @click-left="onClickLeft" title="二手房" />

    <van-dropdown-menu>
      <van-dropdown-item title="区域" ref="item">
        <van-tree-select
          :items="items"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
        />
      </van-dropdown-item>
      <van-dropdown-item title="售价" ref="itemshoujia">
                  <div class="title-menu">选择价格</div>
          <div class="price-container">
            <input class="input-price" type="text" placeholder="最低价格" />
            <van-divider :style="{ color: '#333333', width: '20px' }">
            </van-divider>
            <input class="input-price" type="text" placeholder="最高价格" />
          </div>

        <div class="checkboxStyleprice">
          <input
            type="checkbox"
            id="checkbox1"
            value="1"
            v-model="checkedValue"
          />
          <label for="checkbox1">一室一厅</label>
          <input
            type="checkbox"
            id="checkbox2"
            value="2"
            v-model="checkedValue"
          />
          <label for="checkbox2">一室一厅</label>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="房型" ref="itemfangxing">
        <div class="checkboxStyle">
          <div class="checkboxList">
            <div class="title-menu">选择房型</div>
            <input
              type="checkbox"
              id="checkbox1"
              value="1"
              v-model="checkedValue"
            />
            <label for="checkbox1">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox2"
              value="2"
              v-model="checkedValue"
            />
            <label for="checkbox2">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox3"
              value="3"
              v-model="checkedValue"
            />
            <label for="checkbox3">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox4"
              value="4"
              v-model="checkedValue"
            />
            <label for="checkbox4">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox5"
              value="5"
              v-model="checkedValue"
            />
            <label for="checkbox5">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox6"
              value="6"
              v-model="checkedValue"
            />
            <label for="checkbox6">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox7"
              value="7"
              v-model="checkedValue"
            />
            <label for="checkbox7">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox8"
              value="8"
              v-model="checkedValue"
            />
            <label for="checkbox8">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox9"
              value="9"
              v-model="checkedValue"
            />
            <label for="checkbox9">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox10"
              value="10"
              v-model="checkedValue"
            />
            <label for="checkbox10">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox11"
              value="11"
              v-model="checkedValue"
            />
            <label for="checkbox11">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox12"
              value="12"
              v-model="checkedValue"
            />
            <label for="checkbox12">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox13"
              value="13"
              v-model="checkedValue"
            />
            <label for="checkbox13">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox14"
              value="14"
              v-model="checkedValue"
            />
            <label for="checkbox14">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox15"
              value="15"
              v-model="checkedValue"
            />
            <label for="checkbox15">一室一厅</label>
            <input
              type="checkbox"
              id="checkbox16"
              value="16"
              v-model="checkedValue"
            />
            <label for="checkbox16">一室一厅</label>
            <div class="bottom-menu">
              <button class="cancel" @click="getParam">不限</button>
              <button class="confirm" @click="getParam">确定</button>
            </div>
          </div>
        </div>
        <!-- <div v-for="(item,index) in XXX" :key=index>
    <input type="checkbox"  :id=item.id :value=item.XXX v-model="checkedValue" />
    <label :for=item.id :class=[]>{{item.XXX}}</label>
</div> -->
      </van-dropdown-item>
      <van-dropdown-item title="更多" ref="item">
        <van-tree-select
          :items="items"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
        />
      </van-dropdown-item>
      <van-dropdown-item v-model="value1" :options="option">
        <div slot="title">
          <img src="../assets/sort.png" alt="" />
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>

    <van-card
      num="5485.6元/平"
      price="750万"
      desc="3室1厅/80平/南北通透/鑫苑中央花园洋..."
      title="中间层三居室，户型方正，采 光好，明厨明卫，南北通透"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag color="#00C48233" text-color="#00C482">地铁</van-tag>
        <van-tag color="#FF895733" text-color="#FF8957">满五年</van-tag>
        <van-tag color="#56C1FF33" text-color="#56C1FF">随时看房</van-tag>
        <van-tag color="#E75C6133" text-color="#E75C61">新上</van-tag>
      </template>
    </van-card>

    <van-card
      num="5485.6元/平"
      price="750万"
      desc="3室1厅/80平/南北通透/鑫苑中央花园洋..."
      title="中间层三居室，户型方正，采 光好，明厨明卫，南北通透"
      thumb="./assets/home.png"
    >
      <template #tags>
        <van-tag color="#00C48233" text-color="#00C482">地铁</van-tag>
        <van-tag color="#FF895733" text-color="#FF8957">满五年</van-tag>
        <van-tag color="#56C1FF33" text-color="#56C1FF">随时看房</van-tag>
        <van-tag color="#E75C6133" text-color="#E75C61">新上</van-tag>
      </template>
    </van-card>

    <van-card
      num="5485.6元/平"
      price="750万"
      desc="3室1厅/80平/南北通透/鑫苑中央花园洋..."
      title="中间层三居室，户型方正，采 光好，明厨明卫，南北通透"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag color="#00C48233" text-color="#00C482">地铁</van-tag>
        <van-tag color="#FF895733" text-color="#FF8957">满五年</van-tag>
        <van-tag color="#56C1FF33" text-color="#56C1FF">随时看房</van-tag>
        <van-tag color="#E75C6133" text-color="#E75C61">新上</van-tag>
      </template>
    </van-card>

    <van-card
      num="5485.6元/平"
      price="750万"
      desc="3室1厅/80平/南北通透/鑫苑中央花园洋..."
      title="中间层三居室，户型方正，采 光好，明厨明卫，南北通透"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag color="#00C48233" text-color="#00C482">地铁</van-tag>
        <van-tag color="#FF895733" text-color="#FF8957">满五年</van-tag>
        <van-tag color="#56C1FF33" text-color="#56C1FF">随时看房</van-tag>
        <van-tag color="#E75C6133" text-color="#E75C61">新上</van-tag>
      </template>
    </van-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { areaList } from "@vant/area-data";

export default {
  //import引入的组件需要注入到对象中才能使用

  components: {},
  data() {
    //这里存放数据
    console.log("-----------------------");

    console.log(areaList);

    return {
      areaList,
      activeId: 1,
      activeIndex: 0,
      value1: 0,
      option: [
        { text: "默认排序", value: 0 },
        { text: "最新发布", value: 1 },
        { text: "总价从低到高", value: 2 },
        { text: "总价从高到低", value: 3 },
        { text: "单价从低到高", value: 4 },
        { text: "面积从大到小", value: 5 },
      ],
      items: [
        { text: "浙江", children: [{ text: "浙江" }, { text: "江苏" }] },
        { text: "江苏", children: [{ text: "浙江" }, { text: "江苏" }] },
        {
          text: "浙江",
          children: [
            {
              text: "石家庄市",
              id: 1002,
            },
            {
              text: "邯郸市",
              id: 1001,
            },
            {
              text: "唐山市",
              id: 1003,
            },
            {
              text: "保定市",
              id: 1004,
            },
            {
              text: "秦皇岛市",
            },
            {
              text: "邢台市",
            },
            {
              text: "张家口市",
            },
            {
              text: "承德市",
            },
            {
              text: "沧州市",
            },
            {
              text: "廊坊市",
            },
            {
              text: "衡水市",
            },
            {
              text: "辛集市",
            },
            {
              text: "晋州市",
            },
            {
              text: "新乐市",
            },
            {
              text: "遵化市",
            },
            {
              text: "迁安市",
            },
            {
              text: "霸州市",
            },
            {
              text: "三河市",
            },
            {
              text: "定州市",
            },
            {
              text: "涿州市",
            },
            {
              text: "安国市",
            },
            {
              text: "高碑店市",
            },
            {
              text: "泊头市",
            },
            {
              text: "任丘市",
            },
            {
              text: "黄骅市",
            },
            {
              text: "河间市",
            },
            {
              text: "冀州市",
            },
            {
              text: "深州市",
            },
            {
              text: "南宫市",
            },
            {
              text: "沙河市",
            },
            {
              text: "武安市",
            },
          ],
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    onClickLeft() {
      this.$router.push("/home");
    },
    getParam() {
      this.$refs.itemfangxing.toggle();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.checkboxStyle {
  background: white;
  /* margin-top: 49px;
    padding-top: 30px; */
}
.checkboxStyle input {
  line-height: 30px;
  height: 30px;
  border-radius: 2px;
  display: none;
}
.checkboxStyle label {
  line-height: 30px;
  height: 30px;
  font-size: 12px;
  padding: 0 20px;
  color: #333;
  float: left;
  border-radius: 2px;
  margin: 10px 0 10px 26px;
  text-align: center;
  background: #f1f1f1;
}
.checkboxStyle input:checked + label {
  background-color: rgb(254, 164, 25);
  color: white;
}
.title-menu {
  height: 14px;
  font-size: 15px;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #333333;
  line-height: 15px;
  margin-top: 17px;
  margin-left: 20px;
  margin-bottom: 10px;
}
.bottom-menu {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 44px;
  padding: 28px 0;
}
.confirm {
  width: 160px;
  height: 44px;
  background: #e75c61;
  border-radius: 22px;
  border: none;
  color: #ffffff;
}
.cancel {
  width: 160px;
  height: 44px;
  background: #eeeeee;
  border-radius: 22px;
  border: none;
  color: #666666;
}
.price-container {
  display: flex;
  padding: 20px 20px;
  justify-content: space-between;
}
.checkboxStyleprice {
}
.checkboxStyleprice input {
  appearance: initial;
  line-height: 30px;
  height: 30px;
  border-radius: 2px;
  display: none;
}
.checkboxStyleprice input:checked + label {
  background-color: rgb(254, 164, 25);
  color: white;
}

.checkboxStyleprice label {
  line-height: 30px;
  height: 30px;
  font-size: 12px;
  padding: 0 20px;
  color: #333;
  float: left;
  border-radius: 2px;
  margin: 10px 0 10px 26px;
  text-align: center;
  background: #f1f1f1;
}

.input-price {
  width: 140px;
  height: 20px;
  display: inline-flex;
}
/* @import url(); 引入公共css类 */
</style>
